<script setup>
import { useRouter } from 'vue-router';
import { onMounted, ref, onBeforeUnmount } from 'vue';

const router = useRouter();
const isAsideVisible = ref(false);
const isMobile = ref(false);

// 检测移动端
const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768;
};

onMounted(() => {
  if (!localStorage.getItem('Student')) {
    router.push('/stulogin');
  }
  checkMobile();
  window.addEventListener('resize', checkMobile);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', checkMobile);
});

const logout = () => {
  localStorage.removeItem('Student');
  localStorage.removeItem('no');
  router.push('/stulogin');
};
</script>

<template>
  <div class="common-layout">
    <el-container>
      <!-- Header 区域 -->
      <el-header class="header">
        <span class="title">学生在线选课</span>
        
        <!-- 移动端操作栏 -->
        <div v-if="isMobile" class="mobile-tools">
          <el-icon class="menu-toggle" @click="isAsideVisible = !isAsideVisible">
            <Menu />
          </el-icon>
          <el-tooltip effect="dark" content="退出登录" placement="bottom">
            <el-icon class="logout-icon" @click="logout">
              <SwitchButton />
            </el-icon>
          </el-tooltip>
        </div>

        <!-- 桌面端操作栏 -->
        <div v-else class="desktop-tools">
          <el-button type="text" @click="logout">
            <el-icon><SwitchButton /></el-icon>
            <span>退出登录</span>
          </el-button>
        </div>
      </el-header>

      <el-container>
        <!-- 左侧菜单 -->
        <el-aside 
          :class="['aside', { 'mobile-active': isAsideVisible }]" 
          :style="{ width: isMobile ? '70%' : '200px' }"
        >
          <el-menu router>
            <el-menu-item index="/student">个人中心</el-menu-item>
            <el-sub-menu index="/system">
              <template #title>选课</template>
              <el-menu-item index="/java">Java</el-menu-item>
              <el-menu-item index="/qianduan">前端</el-menu-item>
              <el-menu-item index="/bigdata">大数据</el-menu-item>
              <el-menu-item index="/python">Python</el-menu-item>
              <el-menu-item index="/go">Go</el-menu-item>
              <el-menu-item index="/qianrusi">嵌入式</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/yixuan">已修课程</el-menu-item>
          </el-menu>
        </el-aside>

        <!-- 遮罩层 -->
        <div 
          v-if="isMobile && isAsideVisible" 
          class="menu-mask"
          @click="isAsideVisible = false"
        ></div>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
/* 桌面端样式 */
.header {
  background-image: linear-gradient(to right, #00547d, #007fa4, #00aaa0, #00d072, #a8eb12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
}

.title {
  color: white;
  font-size: 32px;
  font-family: 楷体;
  font-weight: bold;
  letter-spacing: 2px;
}

.desktop-tools {
  .el-button {
    color: white;
    font-size: 16px;
    
    span {
      margin-left: 8px;
    }
  }
}

.aside {
  width: 200px;
  border-right: 1px solid #e4e7ed;
  transition: 0.3s;
}

/* 移动端样式 */
@media (max-width: 768px) {
  .header {
    padding: 0 20px;
  }

  .title {
    font-size: 22px;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-tools {
    display: flex;
    align-items: center;
    gap: 20px;
    
    .menu-toggle {
      color: white;
      font-size: 24px;
      cursor: pointer;
    }
    
    .logout-icon {
      color: white;
      font-size: 22px;
      cursor: pointer;
    }
  }

  .aside {
    position: fixed;
    top: 60px;
    bottom: 0;
    left: -70%;
    z-index: 1001;
    width: 70%;
    background: white;
    box-shadow: 2px 0 8px rgba(0,0,0,0.15);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    &.mobile-active {
      left: 0;
    }
  }

  .menu-mask {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1000;
  }
}

@media (max-width: 480px) {
  .header {
    padding: 0 15px;
  }

  .title {
    font-size: 20px;
  }

  .mobile-tools {
    gap: 15px;
  }
}
</style>